<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="时间">
              <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.startDate"  :disabled-date="disabledStartDate"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.endDate" :disabled-date="disabledEndDate"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </a-card>
</template>

<script>
  import { getAction } from '@/api/manage'

  export default {
    name: 'ChartDemob',
    components: {},
    data() {
      return {
        queryParam: { startDate: '', endDate: '' },
        xData: [], //横坐标
        yData: [], //数据
        myChartStyle: { float: 'left', width: '100%', height: '600px' } //图表样式
      }
    },
    created() {
      this.searchQuery()
    },
     watch: {
    'queryParam.startDate'(newValue) {
      // 当开始日期改变时，如果结束日期小于开始日期，则清空结束日期
      if (this.queryParam.endDate && newValue && newValue > this.queryParam.endDate) {
        this.$message.error("请选择正确的日期");
        this.queryParam.endDate = null;
      }
    },
    'queryParam.endDate'(newValue) {
      // 当结束日期改变时，如果结束日期小于开始日期，则清空结束日期
      if (this.queryParam.startDate && newValue && newValue < this.queryParam.startDate) {
        this.$message.error("请选择正确的日期");
        this.queryParam.endDate = null;
      }
    },
  },
    methods: {
       disabledStartDate(date) {
      // 禁止选择的开始日期
      return date && date.valueOf() > Date.now();
    },
    disabledEndDate(date) {
      // 禁止选择的结束日期
      return date && this.queryParam.startDate && date.valueOf() < this.queryParam.startDate.valueOf();
    },
      searchReset() {
        this.queryParam = { startDate: '', endDate: '' }
      },
      initEcharts() {
        const option = {
          xAxis: {
            data: this.xData
          },
          yAxis: {
            name: '虫子数量统计',
            axisLine:{show:true}
          },
          series: [
            {
              type: 'bar', //形状为柱状图
              data: this.yData,
              barWidth: 40
            }
          ]
        }
        const myChart = this.$echarts.init(document.getElementById('mychart'))
        myChart.setOption(option)
        //随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      searchQuery() {
        let that = this
        this.xData = []
        this.yData = []
        getAction('/dtwlwjc/zwglPestCount/findPestRangCount', this.queryParam).then(res => {
          if (res.success) {
            let cNowXData = []
            let cNowYData = []
            if (res.result && res.result.length > 0) {
              for (var i = 0; i < res.result.length; i++) {
                cNowXData.push(res.result[i]['device_time'])
                cNowYData.push(res.result[i]['tcount'])
              }
            }
            that.xData = [].concat(cNowXData)
            that.yData = [].concat(cNowYData)
            that.initEcharts()
          }
        })
      }
    }
  }
</script>

<style>

</style>